﻿<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>表单</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #box {
      width: 550px;
      float: left;
      /* height: 500px; */
      background: #006699;
      margin: 30%;
      margin-top: 100px;
    }

    #box-1 {
      float: left;
      margin: 10px;
      width: 530px;
      /* height: 480px; */
      background: #fff;
    }

    header {
      text-align: center;
    }

    header h3 {
      line-height: 40px;
    }

    section {
      margin-top: 10px;
    }

    .form1 input {
      margin-left: 160px;
      margin-top: 10px;
      width: 200px;
      height: 24px;
      border-radius: 4px;
    }

    .form1 input[type=submit] {
      width: 60px;
      height: 26px;
      margin-left: 235px;

    }

    .form1 input::-webkit-input-placeholder {
      text-align: center;
      font-size: 12px;
    }

    table {
      width: 528px;
      margin-top: 26px;
      text-align: center;
      margin-bottom: 10px;
      font-family: serif;
      font-size: 13px;
      font-weight: bolder;
      letter-spacing: 6px;
    }

    .edit {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      background: rgba(0, 0, 0, 0.7);
      display: none;
    }

    .form2 {
      margin-top: 200px;

    }

    .form2 input {
      width: 100px;
      height: 24px;
      display: block;


    }

  </style>
</head>

<body>
  <!--  -->
  <div id="box">
    <div id="box-1">
      <header>
        <h3>表单提交</h3>
      </header>
      <section>
        <form class="form1">
          <input type="text" class="name" placeholder="请输入您的名字" required><br>
          <input type="text" class="tel" placeholder="请输入您的电话号码" required><br>
          <input type="text" class="email" placeholder="请输入您的邮箱地址" required><br>
          <input type="submit" class="save">
        </form>
        <table border="1">
          <thead align="center">
            <tr>
              <td>姓名</td>
              <td>电话</td>
              <td>邮箱</td>
              <td>功能</td>
            </tr>
          </thead>
          <tbody>

          </tbody>
        </table>
        <div class=" edit">
          <form class="form2">
            <input type="text" class="editName">
            <input type="text" class="editTel">
            <input type="text" class="editEmail">
            <input type="submit" value="修改" class="editDiv">
          </form>
        </div>
      </section>
    </div>
  </div>
</body>
<script src="js/jquery.js"></script>
<script>
  // 第一步：保存 保存数据 保存到localstorage
  // 第二步：渲染数据 渲染到咱们的table中
  // 第三步：删除 tr localstorage数据删除
  // 第四步：修改 div 渲染当前表单中的数据
  // 第五步：保存咱们修改的
  // 第六步：正则表达式判断
  $('.save').on('click', function (e) {
    e.preventDefault();
    var tel = $('.tel').val();
    var email = $('.email').val();
    //判断一个手机号：/^1(3|4|5|7|8)\d{9}$/.test(tel)
    //判断一个邮箱：/^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/.test(email)
    if (/^1(3|4|5|7|8)\d{9}$/.test(tel)) {
      $('.tel').val(tel);
    } else {
      alert('您的电话号码有误！请重新输入！！');
      return;
    }

    if (/^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/.test(email)) {
      $('.email').val(email);
    } else {
      alert('您的邮箱有误！请重新输入！！');
      return;
    }

    var obj = {
      name: $('.name').val(),
      tel: $('.tel').val(),
      email: $('.email').val()
    }
    //想让数据多条存储 将数据类型变为数组

    var all = localStorage.getItem('list');
    if (all) {
      all = JSON.parse(all);
      all.push(obj);
      localStorage.setItem('list', JSON.stringify(all));
    } else {
      localStorage.setItem('list', JSON.stringify([obj]));
    }
    var str = `<tr>
  <td>${obj.name}</td>
  <td>${obj.tel}</td>
  <td>${obj.email}</td>
  <td>
    <button class="delBtn">删除</button>
    <button class="editBtn">修改</button>
  </td>
</tr>`;
    $('table tbody').append(str);

    //getAll();
  })
  //第二步：渲染数据 渲染到咱们的table中
  getAll();

  function getAll() {
    var all = localStorage.getItem('list');
    console.log(all);
    all = JSON.parse(all);
    console.log(all);
    if (all) {
      for (var i = 0; i < all.length; i++) {
        var str = `<tr>
  <td>${all[i].name}</td>
  <td>${all[i].tel}</td>
  <td>${all[i].email}</td>
  <td>
    <button class="delBtn">删除</button>
    <button class="editBtn">修改</button>
  </td>
  </tr>`;
        $('table tbody').append(str);
      }
    } else {
      return;
    }
  }
  //第三步：删除 tr localstorage数据删除 事件委托
  $('table').on('click', '.delBtn', function () {
    var tr = $(this).parent().parent();
    tr.remove();
    var all = localStorage.getItem('list');
    all = JSON.parse(all);
    all.splice(tr.index(), 1);
    localStorage.setItem('list', JSON.stringify(all));
    //修改
  }).on('click', '.editBtn', function () {
    $('.edit').css({
      display: "block",
    })
    var tr = $(this).parent().parent();
    var all = localStorage.getItem('list');
    all = JSON.parse(all);
    var obj = all[tr.index()];
    obj.index = tr.index();
    sessionStorage.setItem('listEdit', JSON.stringify(obj));
    $('.editName').val(obj.name);
    $('.editTel').val(obj.tel);
    $('.editEmail').val(obj.email);
  })
  //第五步：保存咱们修改的
  $('.editDiv').on('click', function (e) {
    e.preventDefault();
    var all = localStorage.getItem('list');
    var obj2 = sessionStorage.getItem('listEdit');
    all = JSON.parse(all);
    obj2 = JSON.parse(obj2);

    var obj1 = {
      name: $('.editName').val(),
      tel: $('.editTel').val(),
      email: $('.editEmail').val()
    }
    console.log(obj2.index)
    all.splice(obj2.index, 1, obj1);
    localStorage.setItem('list', JSON.stringify(all));
    $('tbody tr').remove();
    getAll();
    $('.edit').css({
      display: "none",
    })
    // $('.edit').hide();





  })

</script>

</html>
